{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/addons/builderPlus/css/base.css" media="all">
<style>
    .tab_color {
        width: 114px;
        height: 45px;
        border: 1px solid #e5e5e5;
        margin-bottom: 10px;
        margin-right: 20px;
        border-radius: 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .acea-row {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
    }

    .color_cont {
        font-size: 14px;
    }


    .mr-2 {
        margin-right: 10px;
    }

    .main_c {
        width: 25px;
        height: 25px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
    }

    .lay-this {
        border: 1px solid #3B91FF;
        transition: all .3s;
    }

    .tab_color_text {
        line-height: 24px;
    }

    .acea-row .layui-icon {
        color: #fff;
    }

    .hide {
        display: none;
    }

    .save-btn {
        position: absolute;
        right: 15px;
        top: 15px;
    }
</style>
<body>
<div class="layui-fluid layui-anim layui-leftbit">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <div class="acea-row">
                {foreach name="list" key="key" item="vo"}
                <div class="tab_color {if $vo.type == $theme.version}lay-this{/if}" lay-change="version" data-id="{$vo.type}">
                    <div class="color_cont flex align-center">
                        <div class="tab_color_text">{$vo.title}</div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="acea-row tpl_list">
                {foreach name="colorList" key="key" item="vo"}
                <div class="tab_color {if $vo.type == $theme.color}lay-this{/if}" lay-change="version_color" data-id="{$vo.type}">
                    <div class="color_cont flex align-center">
                        <div class="main_c mr-2" style="background-color: {$vo.themeColor}"></div>
                        <div class="tab_color_text">{$vo.title}</div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="save-btn">
                <button type="button" class="save-btn-pop layui-btn layui-bg-purple layui-btn-sm" lay-click="change">切换</button>
            </div>
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script id="template" type="text/html">
    {{# for(var i = 0; i < d.data.length; i++) { }}
    <div class="version_color tab_color {{# if (i == 0) { }}lay-this{{# } }}" lay-change="version_color" data-id="{{d.data[i].type}}">
        <div class="color_cont flex align-center">
            <div class="main_c mr-2" style="background-color: {{d.data[i].themeColor}}"></div>
            <div class="tab_color_text">{{d.data[i].title}}</div>
        </div>
    </div>
    {{# } }}
</script>
<script>
    layui.use(['jquery', 'methods', 'notify', 'edit', 'laytpl'], function () {
        const jquery = layui.jquery, methods = layui.methods, notify = layui.notify, edit = layui.edit, laytpl = layui.laytpl;
        edit.render();
        var version = '{$theme.version}', color = '{$theme.color}';
        methods.event.change(['version', 'version_color'], function (data, that) {
            version = data.id;
            methods.fetchGet('{:url("theme/color")}', {version: data.id}, (data) => {
                if (data.code === 1) {
                    jquery(".tpl_list").html('');
                    if (data.data.length > 0) {
                        laytpl(jquery('#template').html()).render({
                            data: data.data,
                        }, function (html) {
                            jquery('.tpl_list').html(html);
                        });
                    }
                } else {
                    notify.error(data.msg);
                }
            });
        }, function (data, that) {
            color = data.id;
        });
        methods.event.click(['change'], function (data, that) {
            methods.fetchPostThrottle('{:url("theme/change")}', {version: version, color: color}, function (data) {
                notify.success(data.msg);
            });
        });
    });
</script>
</html>